<template>
  <div class="index-container-ty">
    <a-spin :spinning="loading">
      <a-row 
        type="flex"
        justify="start"
        :gutter="3">
        <a-col
          :span="24"
          >
          <a-card>
            <div class="index-md-title" slot="title">
              <div>
                <!-- <img :src="icon" /> -->
                {{title}}【{{ dataSource.length }}】
              </div>
            </div>
            <div slot="extra">
              <!-- <a v-if="dataSource1 && dataSource1.length>0" slot="footer" @click="goPage">更多 <a-icon type="double-right" /></a> -->
              <a-radio-group default-value="今日待办" button-style="solid" @change="changeTable($event)">
                <a-radio-button value="今日待办">今日待办</a-radio-button>
                <a-radio-button value="今日已办">今日已办</a-radio-button>
              </a-radio-group>
            </div>
            <a-table
              :class="'my-index-table tytable1'"
              ref="table"
              size="small"
              rowKey="id"
              :columns="columns"
              :dataSource="dataSource"
              :pagination="false">
              <template slot="ellipsisText" slot-scope="text">
                <j-ellipsis :value="text" :length="textMaxLength"></j-ellipsis>
              </template>

              <template slot="dayWarnning" slot-scope="text,record">
                <a-icon type="bulb" theme="twoTone" style="font-size:22px" :twoToneColor="getTipColor(record)"/>
              </template>

              <!-- <span slot="action" slot-scope="text, record">
                <a @click="handleData">办理</a>
              </span> -->

            </a-table>
          </a-card>
        </a-col>
      </a-row>
    </a-spin>
  </div>
</template>

<script>
  import JEllipsis from '@/components/jeecg/JEllipsis';
  const tempSs1=[{
    id:"001",
    orderNo:"12",
    orderTitle:"配种",
    restDay:1
  },{
    id:"002",
    orderNo:"10",
    orderTitle:"妊娠",
    restDay:0
  },{
    id:"003",
    orderNo:"54",
    orderTitle:"围产",
    restDay:7
  },{
    id:"004",
    orderNo:"55",
    orderTitle:"断奶",
    restDay:5
  },{
    id:"005",
    orderNo:"160",
    orderTitle:"检疫",
    restDay:0
  }]

  const tempSs2=[{
    id:"001",
    orderTitle:"配种",
    orderNo:"55",
    restDay:1
  },{
    id:"002",
    orderTitle:"妊娠",
    orderNo:"68",
    restDay:0
  },{
    id:"003",
    orderTitle:"围产",
    orderNo:"44",
    restDay:7
  },{
    id:"004",
    orderTitle:"断奶",
    orderNo:"88",
    restDay:5
  },{
    id:"005",
    orderTitle:"检疫",
    orderNo:"13",
    restDay:0
  }]
  //4-7天
  const tip_green = "rgba(0, 255, 0, 1)"
  //1-3天
  const tip_yellow = "rgba(255, 255, 0, 1)"
  //超期
  const tip_red = "rgba(255, 0, 0, 1)"
export default {
  name: "work",
  component: {JEllipsis},
  data () {
    return {
        loading:false,
        textMaxLength:8,
        title:"",
        titles:["今日待办", "今日已办"],
        dataSource:[],
        icon: "",
        icons:[
          require("@/assets/daiban.png"),
          require("@/assets/zaiban.png")
        ],
        columns:[],
        tableRef:"",
        tablesRef:["table"],
        columns1: [
          {
            title: '',
            dataIndex: '',
            key:'rowIndex',
            width:50,
            fixed:'left',
            align:"center",
            scopedSlots: {customRender: "dayWarnning"}
          },
          {
            title:'剩余天数',
            align:"center",
            dataIndex: 'restDay',
            width:80
          },
          {
            title:'工作内容',
            align:"center",
            dataIndex: 'orderTitle',
            scopedSlots: {customRender: "ellipsisText"}
          },
          {
            title:'剩余数量',
            align:"center",
            dataIndex: 'orderNo',
          },
          // {
          //   title: '操作',
          //   dataIndex: 'action',
          //   align:"center",
          //   scopedSlots: { customRender: 'action' }
          // }
        ],
        columns2: [
          {
            title: '',
            dataIndex: '',
            key:'rowIndex',
            width:50,
            fixed:'left',
            align:"center",
            scopedSlots: {customRender: "dayWarnning"}
          },
          {
            title:'剩余天数',
            align:"center",
            dataIndex: 'restDay',
            width:80
          },
          {
            title:'工作内容',
            align:"center",
            dataIndex: 'orderTitle',
            scopedSlots: {customRender: "ellipsisText"}
          },
          {
            title:'完成数量',
            align:"center",
            dataIndex: 'orderNo',
          }
        ]

      }
  },
  created() {
    this.init();
  },
  methods: {
    changeTable(el) {
      // console.log(el.target.value)
      if(el.target.value === "今日待办"){
        this.dataSource = tempSs1
        this.icon = this.icons[0]
        this.title = this.titles[0]
        this.tableRef = this.tablesRef[0]
        this.columns = this.columns1
      }else{
        this.dataSource = tempSs2
        this.icon = this.icons[1]
        this.title = this.titles[1]
        this.tableRef = this.tablesRef[1]
        this.columns = this.columns2
      }
    },
    getTipColor(rd){
        let num = rd.restDay
        if(num<=0){
          return tip_red
        }else if(num>=1 && num<4){
          return tip_yellow
        }else if(num>=4){
          return tip_green
        }
      },
      goPage(){
        this.$message.success("请根据具体业务跳转页面")
        //this.$router.push({ path: '/comp/mytask' })
      },
      init(){
        this.dataSource = tempSs1
        this.icon = this.icons[0]
        this.title = this.titles[0]
        this.tableRef = this.tablesRef[0]
        this.columns = this.columns1
      },
      // handleData(){
      //   this.$message.success("办理完成")
      // }
  }
  
}
</script>
<style>
  .my-index-table{height:270px}
  .my-index-table table{font-size: 14px !important;}
  .index-container-ty{margin-top: 10px;}
  .index-container-ty .ant-card-head-title{padding-top: 6px;padding-bottom: 6px;}
  .index-container-ty .ant-card-extra{padding:0}
  .index-container-ty .ant-card-extra a{color:rgb(66, 73, 82)}
  .index-container-ty .ant-card-extra a:hover{color:#152ede}
  .index-container-ty .ant-card-head-wrapper,.index-container-ty .ant-card-head{
    line-height:24px;
    min-height:24px;
    /*background: #90aeff;*/
    background: rgb(250, 250, 250);
  }
  .index-container-ty .ant-card-body{padding: 10px 12px 0px 12px}

  /* .index-container-ty .ant-card-actions{background: #fff}
   .index-container-ty .ant-card-actions li {margin:2px 0;}
   .index-container-ty .ant-card-actions > li > span{width: 100%}*/


  .index-container-ty .ant-table-footer{text-align: right;padding:6px 12px 6px 6px;background: #fff;border-top: 2px solid #f7f1f1;}

  .index-md-title{
    postion:relative;
    /* padding-left:24px; */
    width: 100%;
    color:#707070;
    font-size: 21px;
    font-family: cursive;
  }
  /* .index-md-title img{
    position: absolute;
    height:32px;
    top: 2px;
    left:14px;
  } */

  .index-container-ty .ant-card-body{
    /*border-left:1px solid #90aeff;
    /*border-right:1px solid #90aeff;
    border-bottom:1px solid #90aeff;*/
  }


  .index-container-ty .ant-table-thead > tr > th,
  .index-container-ty .ant-table-tbody > tr > td{
    border-bottom: 1px solid #90aeff;
  }

  .index-container-ty .ant-table-small > .ant-table-content > .ant-table-fixed-left > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-thead > tr > th,
  .index-container-ty .ant-table-small > .ant-table-content > .ant-table-fixed-right > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-thead > tr > th{
    border-bottom: 1px solid #90aeff;
  }

  .index-container-ty  .ant-table-small > .ant-table-content > .ant-table-scroll > .ant-table-body > table > .ant-table-thead > tr > th{
    border-bottom: 1px solid #90aeff;
  }

  .index-container-ty .ant-table-small{
    border: 1px solid #90aeff;
  }

  .index-container-ty .ant-table-placeholder {
    padding: 0
  }
</style>